<template>
	<view class="h-screen">
		<view class="absolute h-10 left-0 right-0 bg-primary">
		</view>
		<view class="relative p-5">
			<view class="bg-white rounded shadow p-5 " v-if="info">
				<ys-title title="商品信息"></ys-title>
				<view class="mt-3">
					<view class="flex mb-2">
						<text class="mr-2 flex-shrink-0 w-18 text-justify" style="text-align-last: justify;">商品图片</text>
						<text class="flex-1 text-black-999 break-all">
							<img :src="getFilePath(info.goodsSkuCoverPic)" class="w-20  mr-10">
						</text>
					</view>
					<view class="flex mb-2">
						<text class="mr-2 flex-shrink-0 w-18 text-justify" style="text-align-last: justify;">商品名称</text>
						<text class="flex-1 text-black-999 break-all">
							{{info.goodsSkuName}}
						</text>
					</view>
					<view class="flex mb-2">
						<text class="mr-2 flex-shrink-0 w-18 text-justify" style="text-align-last: justify;">商品规格</text>
						<text class="flex flex-1 text-black-999 break-all">
							{{info.goodsSpecification}}({{info.goodsMeasuringName +'/份'}})

						</text>
					</view>
					<view class="flex mb-2">
						<text class="mr-2 flex-shrink-0 w-18 text-justify" style="text-align-last: justify;">计量单位</text>
						<text class="flex-1 text-black-999 break-all">
							{{info.goodsMeasuringName}}
						</text>
					</view>
				</view>
				<view class="divide-container">
					<view class="divide-left"></view>
					<view class="divide-right"></view>
				</view>
				<ys-title title="采购信息" class="mt-5"></ys-title>
				<view class="mt-3">
					<view class="flex mb-2">
						<text class="mr-2 flex-shrink-0 w-18 text-justify" style="text-align-last: justify;">是否标品</text>
						<text class="flex-1 text-black-999 break-all">
							<u-switch v-model="isStandard" @change="switchChange" activeColor="#2A6757" size="20" :disabled="!!info.isFinish">
							</u-switch>
						</text>
					</view>
					<template v-if="info.isStandard">
						<view class="flex mb-2">
							<text class="mr-2 flex-shrink-0 w-18 text-justify"
								style="text-align-last: justify;">标品应采份数</text>
							<text class="flex-1 text-black-999 break-all">
								{{info.goodsCount}}
							</text>
						</view>
						<view class="flex mb-2">
							<text class="mr-2 flex-shrink-0 w-18 text-justify"
								style="text-align-last: justify;">标品应采总量</text>
							<text class="flex flex-1 text-black-999 break-all">
								{{info.goodsTotal}}{{info.goodsMeasuringName}}
							</text>
						</view>
						<view class="flex mb-2">
							<text class="mr-2 flex-shrink-0 w-18 text-justify"
								style="text-align-last: justify;">标品实采份数</text>
							<text class="flex-1 text-black-999 break-all">
								<template v-if="info.isFinish">
									{{info.goodsCountIndeed}}
								</template>
								<template v-else>
									<input v-model="info.goodsCountIndeed" class="u-border rounded-md px-2 py-1 text-sm"
										placeholder="请输入实采份数" placeholder-style="font-size:13px" />
								</template>

							</text>
						</view>
						<view class="flex mb-2">
							<text class="mr-2 flex-shrink-0 w-18 text-justify"
								style="text-align-last: justify;">标品实采总量</text>
							<text class="flex flex-1 text-black-999 break-all">

								<template v-if="info.isFinish">
									{{info.goodsCountIndeed}}
								</template>
								<template v-else>
									{{actualGoodsTotal}}
								</template>
							</text>
						</view>
					</template>
					<template v-else>
						<view class="flex mb-2 items-center">
							<template v-if="info.isFinish">
								<text class="mr-2 flex flex-shrink-0 w-18 text-justify"
									style="text-align-last: justify;">非标品{{info.equalsUnstandardCount}}份相当于标品{{info.equalsStandardCount}}份</text>
							</template>
							<template v-else>
								<text class="mr-2 flex flex-shrink-0 w-18 text-justify"
									style="text-align-last: justify;">非标品</text>
								<input v-model="info.equalsUnstandardCount"
									class="u-border rounded-md px-2 py-1 text-sm w-6" placeholder-style="font-size:13px" />
								<text class="mx-2">份相当于标品</text>
								<input v-model="info.equalsStandardCount" class="u-border rounded-md px-2 py-1 text-sm w-6"
									placeholder-style="font-size:13px" />
								<text class="ml-2">份</text>
							</template>
							
						</view>
						<view class="flex mb-2">
							<text class="mr-2 flex-shrink-0 w-18 text-justify"
								style="text-align-last: justify;">非标品应采份数</text>
							<text class="flex-1 text-black-999 break-all">
								{{info.unstandardCountShould}}
							</text>
						</view>
						<!-- <view class="flex mb-2">
							<text class="mr-2 flex-shrink-0 w-18 text-justify" style="text-align-last: justify;">非标品应采总量</text>
							<text class="flex flex-1 text-black-999 break-all">
								{{info.goodsTotal}}{{info.goodsMeasuringName}}
							</text>
						</view> -->
						<view class="flex mb-2">
							<text class="mr-2 flex-shrink-0 w-18 text-justify"
								style="text-align-last: justify;">非标品实采份数</text>
							<text class="flex-1 text-black-999 break-all">
								<template v-if="info.isFinish">
									{{info.unstandardCountIndeed}}
								</template>
								<template v-else>
									<input v-model="info.unstandardCountIndeed"
										class="u-border rounded-md px-2 py-1 text-sm" placeholder="请输入实采份数"
										placeholder-style="font-size:13px" />
								</template>

							</text>
						</view>
						<!-- <view class="flex mb-2">
							<text class="mr-2 flex-shrink-0 w-18 text-justify" style="text-align-last: justify;">非标品实采总量</text>
							<text class="flex flex-1 text-black-999 break-all">
								
								<template v-if="info.isFinish">
									{{info.goodsCountIndeed}}
								</template>
								<template v-else>
									{{actualGoodsTotal}}
								</template
								>
							</text>
						</view> -->
					</template>
					<view class="divide-container">
						<view class="divide-left"></view>
						<view class="divide-right"></view>
					</view>
					<view class="flex mb-2 mt-5">
						<text class="mr-2 flex-shrink-0 w-18 text-justify" style="text-align-last: justify;">采购照片</text>

						<text class="flex flex-1 text-black-999 break-all">
							<template v-if="info.isFinish">
								<img v-for="(j, index2) in info.scenePics && info.scenePics.split(',')" :src="getFilePath(j)" class="w-20  mr-3" :key="index2">
							</template>
							<template v-else>
								<view class="">
									<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
										multiple :maxCount="9"></u-upload>
								</view>

							</template>
						</text>
					</view>
					<view class="mb-2">
						<text class="mr-2 flex-shrink-0 w-18 text-justify" style="text-align-last: justify;">采购备注</text>
						<view class="mt-2">
							<textarea placeholder="请输入采购备注" v-model="info.remark" class="p-2 rounded-md text-black-999"
								style="background-color: #f8f8f8; width: 95%;"></textarea>
						</view>

					</view>
				</view>
			</view>
		</view>



		<u-gap height="50"></u-gap>
		<view class="fixed bottom-0 left-0 right-0 h-12 bg-white u-border-top flex items-center"
			v-if="info && !info.isFinish">
			<view class="flex-1  h-full flex items-center justify-center" @click="onSave()">
				暂存
			</view>
			<view class="flex-1 bg-primary text-white flex items-center justify-center h-full"
				@click="onSave('finish')">
				完成
			</view>
		</view>
	</view>
</template>

<script>
	import {
		query
	} from '@/utils/utils'
	import request from '@/utils/request'
	import {
		getSigns
	} from '@/utils/index.js'
	import {
		getFilePath
	} from '@/utils/index.js'
	import {
		toast
	} from '@/utils/utils'
	export default {
		data() {
			return {
				businessData: null,
				hasProcessAuth: false,
				processInfo: null,
				showPopup: false,
				form: {},
				info: null,
				fileList1: [],
				isStandard: false,
				form: {}
			}
		},
		watch: {
			'info.equalsUnstandardCount': function(nv, ov) {
				this.$u.debounce(this.cal, 1000)
			},
			'info.equalsStandardCount': function(nv, ov) {
				this.$u.debounce(this.cal, 1000)
			},
		},
		computed: {
			actualGoodsTotal() {
				const num = this.form.goodsCountIndeed || 0
				const {
					goodsCount,
					goodsCountIndeed,
					goodsSpecification,
					goodsMeasuringName
				} = this.info
				const total = goodsCountIndeed * goodsSpecification
				this.info.goodsTotalIndeed = total
				return total + goodsMeasuringName
			}
		},
		onLoad(params) {
			const {
				info
			} = query(params)
			const {
				isStandard,
				purchaseGoodsId
			} = info
			this.purchaseGoodsId = purchaseGoodsId
			this.isStandard = !!isStandard
			this.getInfo()
		},
		methods: {
			onFinish() {

			},
			cal() {
				const {
					purchaseGoodsId,
					equalsUnstandardCount,
					equalsStandardCount
				} = this.info
				
				if (!equalsUnstandardCount ||!equalsStandardCount ) return
				request(`calcUnStandardPurchaseCount`, {
					method:'post',
					data: {
						purchaseGoodsId,
						equalsUnstandardCount,
						equalsStandardCount
					}
				}).then(res => {
					this.info.unstandardCountShould = res.unstandardCountShould
				})
			},
			switchChange(e) {
				console.log(!e)
				if (e) {
					this.info.isStandard = 1
				} else {
					this.info.isStandard = 0
				}
			},
			getFilePath,
			getInfo() {
				request(`selectPurchaseGoodsVoById/${this.purchaseGoodsId}`).then(res => {
					this.info = res
					if (this.info.scenePics) {
						const pics = this.info.scenePics.split(',')
						pics.map(i => {
							console.log(i)
							this.fileList1.push({
								url: getFilePath(i)
							})
						})
					}
				})
			},
			onPickerConfirm() {
				const data = Object.assign(this.form, {
					record_id: this.info.id
				})
				request('workflowProcess', {
					method: 'post',
					data,
				}).then(res => {
					toast('处理成功')
					setTimeout(() => {
						this.getProcessLimits()
						this.getProcessInfo()
					}, 1000)
					this.showPopup = false

				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.info.scenePics = this[`fileList${event.name}`].map(i => i.url).join(',')
			},
			// 新增图片
			async afterRead(event) {

				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}

				this.info.scenePics = this[`fileList${event.name}`].map(i => i.url).join(',')

			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$store.state.uploadUrl,
						filePath: url,
						fileType: 'image',
						name: 'file',
						header: {
							Authorization: 'Bearer ' + this.$store.state.token,
						},
						success: (res) => {
							console.log(res)
							console.log(res.data)
							if (res.statusCode === 200) {
								const result = JSON.parse(res.data)
								if (result.code === 200) {
									setTimeout(() => {
										resolve(result.data.objectName)
									}, 1000)
								}
							}
						}
					});
				})
			},
			/* 暂存 */
			onSave(type) {
				let url = 'editPurchaseGoodsAllColumns'
				if (type == 'finish') {
					url = 'purchaseGoodsFinish'
				}
				request(url, {
					method: 'put',
					data: this.info
				}).then(res => {
					toast('操作成功')
					setTimeout(uni.navigateBack, 1000)
				})
			},
			handleProcess(type) {

				console.log(this.info)
				return
				this.form.operation = type
				this.showPopup = true
			},
			getProcessLimits() {
				const user = this.$store.state.userInfo
				const {
					id: user_id
				} = user
				request('workflowProcessLimits', {
					data: {
						record_id: this.info.id
					}
				}).then(res => {
					toast('暂存成功')
					setTimeout(uni.navigateBack, 1000)
				})
			},
			getProcessInfo() {
				const user = this.$store.state.userInfo
				const {
					id: user_id
				} = user
				request('workflowProcessInfo', {
					data: {
						record_id: this.info.id
					}
				}).then(res => {
					this.processInfo = res
					console.log(res)

				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.divide-container {
		position: relative;
		border-bottom-color: #eee;
		border-bottom-width: 2rpx;
		border-bottom-style: dashed;
		margin-top: 35rpx;
		margin-bottom: 10rpx;

		.divide-left {
			position: absolute;
			top: 50%;
			left: -60rpx;
			width: 50rpx;
			height: 50rpx;
			transform: translate(0, -50%);
			border-radius: 50%;
			background: #f8f8f8;
		}

		.divide-right {
			position: absolute;
			top: 50%;
			right: -60rpx;
			width: 50rpx;
			height: 50rpx;
			transform: translate(0, -50%);
			border-radius: 50%;
			background: #f8f8f8;
		}
	}
</style>
